import type { RouteRecordRaw } from 'vue-router'
import { createRouter, createWebHistory } from 'vue-router'
import SyLayout from '@/views/SyLayout.vue'

const routes: Readonly<RouteRecordRaw[]> = [
  {
    path: '/',
    component: SyLayout,
    redirect: '/dashboard',
    children: [  // 子路由中的组件，会去“占用”父路由的组件“身上”的 <router-view> 区域。
      {
        path: '/dashboard',
        component: () => import('@/views/SyDashboard.vue'),
        name: 'dashboard',
        meta: {
          title: '首页',
          icon: '#icondashboard'
        }
      }
    ]
  },
  {
    path: '/system',
    component: SyLayout,
    name: 'system',
    meta: {
      title: '系统管理',
      icon: 'el-icon-menu',
      roles: ['sys:manage']
    },
    children: [
      {
        path: '/userList',
        component: () => import('@/views/system/SyUserList.vue'),
        name: 'userList',
        meta: {
          title: '员工管理',
          icon: 'el-icon-s-custom',
          roles: ['sys:user']
        }
      },
      {
        path: '/roleList',
        component: () => import('@/views/system/SyRoleList.vue'),
        name: 'roleList',
        meta: {
          title: '角色管理',
          icon: 'el-icon-s-tools',
          roles: ['sys:role']
        }
      },
      {
        path: '/menuList',
        component: () => import('@/views/system/SyMenuList.vue'),
        name: 'menuList',
        meta: {
          title: '权限管理',
          icon: 'el-icon-document',
          roles: ['sys:menu']
        }
      }
    ]
  },
  {
    path: '/memberRoot',
    component: SyLayout,
    name: 'memberRoot',
    meta: {
      title: '会员管理',
      icon: 'Setting',
      roles: ['sys:memberRoot']
    },
    children: [
      {
        path: '/cardType',
        component: () => import('@/views/member/SyCardType.vue'),
        name: 'cardType',
        meta: {
          title: '会员卡类型',
          icon: 'UserFilled',
          roles: ['sys:cardType']
        }
      },
      {
        path: '/memberList',
        component: () => import('@/views/member/SyMemberList.vue'),
        name: 'memberList',
        meta: {
          title: '会员管理',
          icon: 'Wallet',
          roles: ['sys:memberList']
        }
      },
      {
        path: '/myFee',
        component: () => import('@/views/member/SyMyFee.vue'),
        name: 'myFee',
        meta: {
          title: '我的充值',
          icon: 'Menu',
          roles: ['sys:myFee']
        }
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router
